<template>
	<view class="edit">
		<view class="tip">上传头像并完善个人信息，可获得更高人气</view>
		<view class="avatar flex">
			<image src="/static/1.jpg" mode="aspectFill"></image>
			<view class="btn flex" @click="upload">上传头像</view>
		</view>
		<view class="list flex-between" @click="changePopup(1)">
			<view>
				<view class="label">昵称</view>
				<view class="h2">Lakin4622</view>
			</view>
			<image src="/static/arrow.png" mode="widthFix"></image>
		</view>
		<view class="list flex-between" @click="changePopup(2)">
			<view>
				<view class="label">性别</view>
				<view class="h2">
					<text>未设置</text>
				</view>
			</view>
			<image src="/static/arrow.png" mode="widthFix"></image>
			
		</view>
		<view class="list flex-between" @click="changePopup(3)">
			<view>
				<view class="label">国家地区</view>
				<view class="h2">
					<text>点击选择地区</text>
				</view>
			</view>
			<image src="/static/arrow.png" mode="widthFix"></image>
		</view>
		<view class="list flex-between" @click="changePopup(4)">
			<view>
				<view class="label">简介</view>
				<view class="h2">编辑简介</view>
			</view>
			<image src="/static/arrow.png" mode="widthFix"></image>
		</view>
		<!-- 昵称 -->
		<view class="popup flex" v-if="showPopup">
			<view class="content">
				<block v-if="type == 1">
					<view class="title flex-center">编辑昵称</view>
					<input type="text" placeholder="请输入昵称">
				</block>
				<block v-if="type == 2">
					<view class="title flex-center">选择性别</view>
					<view class="list flex-center" @click="saveData(type,1)">男</view>
					<view class="list flex-center" @click="saveData(type,2)">女</view>
				</block>
				<block v-if="type == 4">
					<view class="title flex-center">编辑简介</view>
					<textarea placeholder="输入简介8-70个字符"></textarea>
				</block>
				<view class="flex-between">
					<view class="btn flex-center" @click="showPopup = false">取消</view>
					<view class="save flex-center btn" @click="saveData(type)" v-if="type != 2">保存</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPopup:false,
				type:1,
			};
		},
		methods:{
			changePopup(i){
				this.type = i;
				if(i == 3){
					uni.showToast({
						title:'待确定',
						icon:'none'
					})
				}else{
					this.showPopup = true;
				}
				
			},
			saveData(type,value){
				uni.showToast({
					title:'保存数据',
					icon:'none'
				})
				this.showPopup = false;
			},
			upload(){
				uni.chooseImage({
					count:1,
					success:r=> {
						console.log(r)
					}
				})
			}
		}
	}
</script>

<style lang="less">
	page{
		background: white;
	}
	@color: #d4237a;
	.edit{
		padding:0 30rpx;
		.tip{
			font-size: 24rpx;
			text-align: center;
			color:#999;
		}
		.avatar{
			margin: 40rpx 0;
			image{
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
			}
			.btn{
				background: @color;
				margin-left: 30rpx;
				padding: 8rpx 20rpx;
				border-radius: 10rpx;
				color:#fff;
			}
		}
		.list{
			.label{
				font-size: 28rpx;
				color:#666;
			}
			.h2{
				line-height: 1.5;
				font-size: 34rpx;
				padding-bottom: 30rpx;
				font-weight: bold;
			}
			image{
				width: 30rpx;
				height: auto;
			}
		}
		
		.popup{
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			background: rgba(0,0,0,.3);
			align-items: flex-end;
			.content{
				min-height: 200rpx;
				border-radius: 20rpx 20rpx 0 0;
				width: 100vw;
				background: white;
				padding: 30rpx;
				.title{
					font-size: 26rpx;
					color:#999;
					margin-bottom: 20rpx;
				}
				input{
					width: 100%;
					height: 80rpx;
					box-sizing:border-box;
					padding: 0 20rpx;
					font-size: 30rpx;
					background: #eee;
					margin: 40rpx 0;
					border-radius: 15rpx;
				}
				.list{
					line-height: 80rpx;
					border-bottom: 1rpx solid #eee;
				}
				textarea{
					background: #eee;
					border-radius: 15rpx;
					padding: 20rpx;
					box-sizing: border-box;
					width: 100%;
					height: 200rpx;
					font-size: 30rpx;
				}
				.btn{
					width: 100%;
					background: #eee;
					height: 80rpx;
					font-size: 30rpx;
					font-weight: bold;
					border-radius: 40rpx;
					margin-top: 30rpx;
				}
				.save{
					background: @color;
					color:#fff;
					margin-left: 40rpx;
				}
			}
		}
	}
</style>
